<template>
    <div class="search_bar_container flex_row">
        <div v-if="is_show_title" class="search_bar_title flex_center mr10 font_size16 bold">{{ tab.label }}</div>
        <el-row :gutter="10" class="search_bar">
            <el-col :span="left_col_span">
                <el-row :gutter="20">
                    <el-col :span="left_col2_span" v-if="shop_ls && shop_ls.length > 0">
                        <div class="select_store flex_row">
                            <span class="select_store_span font_black3">云店：</span>
                            <el-select class="select_store_el" style="flex: 1;" v-model="query.shopid" placeholder="请选择"
                                size="mini" @change="selectHandleChange">
                                <el-option v-for="item in shop_ls" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <!-- <el-col v-if="show_divider && order_ls && order_ls.length > 0" :span="1"><el-divider direction="vertical"></el-divider></el-col> -->
                    <el-col :span="left_col2_span" v-if="staff_ls && staff_ls.length > 0">
                        <div class="select_store flex_row">
                            <span class="select_store_span font_black3">成员：</span>
                            <el-select class="select_store_el" style="flex: 1;" v-model="query.uid_cp" placeholder="请选择"
                                size="mini" @change="selectHandleChange">
                                <el-option v-for="item in staff_ls" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="left_col2_span" v-if="product_ls && product_ls.length > 0">
                        <div class="select_store flex_row">
                            <span class="select_store_span font_black3">类型：</span>
                            <el-select class="select_store_el" style="flex: 1;" v-model="query.is_yy" placeholder="请选择"
                                size="mini" @change="selectHandleChange">
                                <el-option v-for="item in product_ls" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <!-- <el-col v-if="show_divider && shop_ls && shop_ls.length > 0" :span="1"><el-divider direction="vertical"></el-divider></el-col> -->
                    <el-col :span="left_col2_span" v-if="order_ls && order_ls.length > 0">
                        <div class="select_store flex_row">
                            <span class="select_store_span font_black3">排序：</span>
                            <el-select class="select_store_el" style="flex: 1;" v-model="query.order" placeholder="请选择"
                                size="mini" @change="selectHandleChange">
                                <el-option v-for="item in order_ls" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="right_col_span">
                <div class="flex_between">
                    <div class="flex_row flex1" v-if="group_ls && group_ls.length > 0">
                        <div class="date-box flex_between flex1 mr10">
                            <div :class="['date-box-item', 'flex_center', item.value == query.group ? 'active' : '']"
                                v-for="item in group_ls" :key="item.value" @click="selectDate(item.value)">
                                <span>{{ item.label }}</span>
                            </div>
                        </div>
                        <div style="width: 220px;">
                            <el-date-picker style="width: 220px;" size="mini" v-model="dateArray" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="handleDateChange">
                            </el-date-picker>
                        </div>
                    </div>
                    <!-- <div>
                        <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
                    </div> -->
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineProps, defineEmits, defineExpose, onUnmounted, onBeforeUnmount } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
// 获取当前组件实例
const { proxy } = getCurrentInstance()

const props = defineProps({
    left_col_span: {
        type: [Number, String],
        default: 9
    },
    right_col_span: {
        type: [Number, String],
        default: 15
    },
    left_col2_span: {
        type: [Number, String],
        default: 6
    },
    show_divider: {
        type: Boolean,
        default: true
    },
    is_show_title: {
        type: Boolean,
        default: true
    },
    tab: {
        type: Object,
        default: () => { }
    },
    shop_ls: {
        type: Array,
        default: () => []
    },
    staff_ls: {
        type: Array,
        default: () => []
    },
    group_ls: {
        type: Array,
        default: () => []
    },
    order_ls: {
        type: Array,
        default: () => []
    },
    product_ls: {
        type: Array,
        default: () => []
    },
})

const query = ref({
    shopid: '', // 门店id
    uid_cp: '', // 成员id
    group: '', // 时间类型
    stime: '', // 开始时间
    dtime: '', // 结束时间
    order: '1', // 排序  1 销售 2.销量 3.毛利 4.单数 
    is_yy: '2', //  1 按服务  2 按产品
})

const resetFc = () => {
    query.value.shopid = ''
    query.value.uid_cp = ''
    query.value.group = ''
    query.value.stime = ''
    query.value.dtime = ''
    query.value.order = '1'
    query.value.is_yy = '2'
}

const emit = defineEmits(['selectHandle'])
const selectHandleChange = (val) => {
    emit('selectHandle', query.value)
}

const dateArray = ref([])

// 日期选择器配置
const pickerOptions = {
    disabledDate(time) {
        return time.getTime() > Date.now()
    }
}

const selectDate = (val) => {
    query.value.group = val
    if (val != 5) {
        query.value.stime = ''
        query.value.dtime = ''
        dateArray.value = []
    }
    selectHandleChange()
}

const handleDateChange = (val) => {
    if (val) {
        query.value.stime = val[0]
        query.value.dtime = val[1]
        dateArray.value = val
        query.value.group = '5'
        selectHandleChange()
    } else {
        query.value.stime = ''
        query.value.dtime = ''
        dateArray.value = []
        selectHandleChange()
    }
}

// const handleExport = async () => {
//     try {
//         await exportData(proxy);
//     } catch (error) {
//         console.error('Export failed:', error);
//     }
// }

onMounted(() => {
    // 设置默认日期为最近30天
})

defineExpose({
    resetFc
})

</script>

<style lang="scss" scoped>
.search_bar_container {
    // background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
    // border-radius: 4px;
    flex: 1;
    height: 100%;
}

.search_bar {
    // border-bottom: 1px solid #f1f5f9;
    // padding: 10px;
    flex: 1;
}

.search_bar_title {
    height: 100%;
    background-color: #3388ff;
    padding: 0 10px;
    border-radius: 4px;
    color: #fff;
    letter-spacing: 4px;
}

.date-box {
    height: 28px;
    border: 1px solid #dddfe2;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.3s;
    max-width: 380px;
    overflow: hidden;
}

.date-box-item {
    height: 100%;
    flex: 1;
    border-right: 1px solid #dddfe2;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.date-box-item:last-child {
    border-right: none;
}

.date-box-item:hover:not(.active) {
    color: #3388ff;
}

.active {
    background-color: #3388ff;
    color: #fff;
}

.select_store {
    cursor: pointer;
}

.select_store ::v-deep .el-input__inner {
    background-color: #fff !important;
    border: 1px solid #dddfe2 !important;
    // color: #333 !important;
    padding-left: 8px !important;
    text-align: left !important;
    border-radius: 4px !important;
    transition: all 0.3s;
}

.select_store ::v-deep .el-input__inner:hover {
    border-color: #3388ff !important;
}
</style>